<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>天气预报</title>
    <style>
        body {
            font-family: 'Microsoft YaHei';
        }
        
        section {
            color: #3a6;
            border-top: 1px solid #aaa;
        }
        p{
            text-align: justify;
        }
        
        section:first-of-type {
            color: cornflowerblue;
        }
        
        section:last-of-type {
            color: #fa4;
        }
    </style>
</head>

<body>
    <p>城市代码：<br>
郑州:101180101 新乡:101180301 许昌:101180401 平顶山:101180501 信阳:101180601
南阳:101180701 开封:101180801 洛阳:101180901 商丘:101181001 焦作:101181101
鹤壁:101181201 濮阳:101181301 周口:101181401 漯河:101181501 驻马店:101181601
三门峡:101181701 济源:101181801 安阳:101180201</p>
    <form>
        <input type="text" name="citykey" class="city" value="101180101">
        <input type="submit" value="提交">
    </form>
    <h1></h1>
    <main></main>
</body>

</html>

<script>

    document.forms[0].onsubmit = function (ev) {
        ev.preventDefault();
        // 创建一个weather对象
        var weather = new XMLHttpRequest();

        // 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
        // 每当 readyState 改变时，就会触发 onreadystatechange 事件。
        weather.onreadystatechange = function () {
            // readyState：存有 XMLHttpRequest 的状态
            // 从 0 到 4 发生变化。
            // 0: 请求未初始化
            // 1: 服务器连接已建立
            // 2: 请求已接收
            // 3: 请求处理中
            // 4: 请求已完成，且响应已就绪
            if (weather.readyState == 4) {
                // 获得字符串形式的响应数据
                var data = weather.responseText;
                // 将字符串转化为json对象
                var weatherJS = JSON.parse(data).data;

                document.querySelector('h1').innerHTML = weatherJS.city;

                var main = document.querySelector('main');
                var message = '';
                // 实时
                var data = weather.data;
                message += '<section>';
                message += '<h2>温度：' + weatherJS.wendu + '℃</h2>';
                message += '<p>感冒指数：' + weatherJS.ganmao + '</p>';
                message += '</section>';

                // 预报未来五天天气
                var forecast = weatherJS.forecast;
                for (var i = 0; i < forecast.length; i++) {
                    var n = forecast[i];
                    console.log(n);
                    message += '<section>';
                    message += '<h3>日期：' + n.date + '</h2>';
                    message += '<h3>天气：' + n.type + '</h3>';
                    message += '<p>风向：' + n.fengxiang + '</p>';
                    message += '<p>风力：' + n.fengli + '</p>';
                    message += '<p>' + n.low + ' ~ ' + n.high + '</p>';
                    message += '</section>';
                }

                // 昨天
                var yesterday = weatherJS.yesterday;
                message += '<section>';
                message += '<h3>昨天：' + yesterday.date + '</h2>';
                message += '<h3>天气：' + yesterday.type + '</h3>';
                message += '<p>风向：' + yesterday.fx + '</p>';
                message += '<p>风力：' + yesterday.fl + '</p>';
                message += '<p>' + n.low + ' ~ ' + n.high + '</p>';
                message += '</section>';

                console.log(message);
                main.innerHTML = message;
            }
        }

        var result = document.querySelector('.city').value;
        var url = 'http://wthrcdn.etouch.cn/weather_mini?citykey=' + result;
        // 规定请求的类型、URL 以及是否异步处理请求
        weather.open('GET', url);
        // 将请求发送到服务器
        weather.send();

    }

</script>